<!--
  Generated template for the StockPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
  <ion-navbar color="gm-primary">
    <ion-title>{{quotation.name}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="bg-color">
  <ion-grid>
    <ion-row class="info-layout">
      <ion-col col-6>
        <div [ngClass]="getMasterStyle(quotation.range)">
          {{quotation.tradePrice}}&nbsp;
          <ion-icon [name]="getMasterIconName(quotation.range)" class="icon-size"></ion-icon>
        </div>
        <div [ngClass]="getSlaveStyle(quotation.range)">{{quotation.range}}&emsp;&emsp;{{quotation.rangePercent}}</div>
      </ion-col>
      <ion-col col-6>
        <ion-row>
          <ion-col col-6>
            <div class="left-title">今开</div>
            <div class="left-value">{{quotation.openPrice}}</div>
          </ion-col>
          <ion-col col-6>
            <div class="left-title">昨收</div>
            <div class="left-value">{{quotation.preClosePrice}}</div></ion-col>
        </ion-row>
        <ion-row>
          <ion-col col-6>
            <div class="left-title">最高</div>
            <div class="left-value">{{quotation.highPrice}}</div></ion-col>
          <ion-col col-6>
            <div class="left-title">最低</div>
            <div class="left-value">{{quotation.lowPrice}}</div></ion-col>
        </ion-row>
      </ion-col>
    </ion-row>
  </ion-grid>

  <div class="scroll-view">
    <button ion-button color="primary" clear full *ngFor="let date of query_list;let idx = index"
            [ngClass]="getTabBtnStyle(idx)" (click)="onTabBtnSelected(idx, date.value)">{{date.title}}</button>
  </div>

  <div id="line" *ngIf="tab_position == 0"></div>
  <div id="stock" *ngIf="tab_position > 0"></div>
</ion-content>
